﻿<!DOCTYPE html>
<html>
<head>
  <title>CheckBoxes</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <meta name="description" content="An implementation of CheckBoxes as GoJS objects to show and edit a boolean data property." />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="../release/go.js"></script>
  <script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
        {
          "undoManager.isEnabled": true  // enable undo & redo
        });

      // this template includes a lot of CheckBoxes, each configured in different manners
      myDiagram.nodeTemplate =
        $(go.Node, "Auto",  // the Shape will go around the whole table
          $(go.Shape, { strokeWidth: 0 },  // no border
            new go.Binding("fill", "color")),
          $(go.Panel, "Table",
            { padding: 3 },
            $(go.TextBlock,
              { row: 0, column: 0, columnSpan: 2 },
              { margin: 3, font: "bold 10pt sans-serif" },  // some room around the bold text
              new go.Binding("text", "key")),
            // the first column has an assortment of CheckBoxes
            $(go.Panel, "Vertical",
              { row: 1, column: 0, defaultAlignment: go.Spot.Left },
              $("CheckBox", "choice1",
                $(go.TextBlock, "default")
              ),
              $("CheckBox", "choice2",
                { "ButtonIcon.stroke": "green" },
                $(go.TextBlock, "green")
              ),
              $("CheckBox", "choice3",
                { "ButtonIcon.stroke": "red", "ButtonIcon.figure": "XLine" },
                $(go.TextBlock, "red X")
              ),
              $("CheckBox", "choice4",
                { "_buttonFillOver": "pink", "_buttonStrokeOver": "red" },
                $(go.TextBlock, "pink over")
              ),
              $("CheckBox", "choice5",
                { "Button.width": 32, "Button.height": 32 },
                $(go.TextBlock, "BIG",
                  { font: "bold 12pt sans-serif" })
              ),
              $("CheckBox", "choice6",
                {
                  "Button.width": 20, "Button.height": 20,
                  "ButtonBorder.figure": "Circle", "ButtonBorder.stroke": "blue",
                  "ButtonIcon.figure": "Circle", "ButtonIcon.fill": "blue",
                  "ButtonIcon.strokeWidth": 0, "ButtonIcon.desiredSize": new go.Size(10, 10)
                },
                $(go.TextBlock, "blue circle")
              ),
              $("CheckBox", "choice7", go.Panel.Vertical,
                $(go.TextBlock, "vertical")
              )
            ),
            // the second column is a list of CheckBoxes
            $(go.Panel, "Table",
              {
                row: 1, column: 1,
                alignment: go.Spot.Top,
                minSize: new go.Size(50, NaN),
                itemTemplate:
                  $("CheckBox", "checked", go.Panel.TableRow,
                    $(go.TextBlock,  // align text towards the right, next to the Button
                      { column: 0, alignment: go.Spot.Right },
                      new go.Binding("text", "name")),
                    { "Button.column": 1 }  // put Button in second column, to the right of text
                  )
              },
              new go.Binding("itemArray", "items")
            ),
            // now a checkbox at the bottom of the whole table
            $("CheckBox", "",  // not data bound
              { row: 3, columnSpan: 2, alignment: go.Spot.Left },
              // this checkbox is not bound to model data, but it does toggle the Part.movable
              // property of the Node that this is in
              $(go.TextBlock, "Node is not movable"),
              { // _doClick is executed within a transaction by the CheckBoxButton click function
                "_doClick": function(e, obj) {
                  obj.part.movable = !obj.part.movable;  // toggle the Part.movable flag
                }
              }
            )
          )
        );

      // but use the default Link template, by not setting Diagram.linkTemplate

      // create the model data that will be represented by Nodes and Links
      myDiagram.model =
        $(go.GraphLinksModel,
          {
            copiesArrays: true,
            copiesArrayObjects: true,
            "Changed": function(e) {
              if (e.isTransactionFinished) document.getElementById("mySavedModel").textContent = myDiagram.model.toJson();
            },
            nodeDataArray:
              [
                {
                  key: "Alpha", color: "lightblue", choice1: true, choice2: true, choice3: true, choice4: true, choice5: true, choice6: true, choice7: true,
                  items: [{ name: "item 0" },
                  { name: "item 1" },
                  { name: "item 2" }]
                },
                {
                  key: "Beta", color: "orange",
                  items: [{ name: "B1", checked: false },
                  { name: "Bee2", checked: true }]
                },
                {
                  key: "Gamma", color: "lightgreen",
                  items: [{ name: "C-one", checked: true },
                  { name: "C-two", checked: true },
                  { name: "C-three" }]
                },
                {
                  key: "Delta", color: "pink", choice1: true, choice2: false,
                  items: []
                }
              ],
            linkDataArray:
              [
                { from: "Alpha", to: "Beta" },
                { from: "Alpha", to: "Gamma" },
                { from: "Gamma", to: "Delta" },
                { from: "Delta", to: "Alpha" }
              ]
          });
    }
  </script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:500px; height:500px"></div>
  <p>
    Various uses of CheckBoxes.  These are predefined in the library.
    You can see how they are defined in <a href="Buttons.js">Buttons.js</a>.
  </p>
  <textarea id="mySavedModel" style="width:100%;height:300px"></textarea>
</div>
</body>
</html>